{% extends "base.html" %}

{% block title %}宾馆介绍 - 风之宿{% endblock %}

{% block content %}
<!-- 页面头部 -->
<section class="py-16 bg-primary/10">
  <div class="container mx-auto px-4">
    <div class="text-center">
      <h1 class="text-4xl font-serif font-bold text-primary mb-4">宾馆介绍</h1>
      <p class="text-xl text-gray-600 max-w-3xl mx-auto">
        {{ page_contents.description if page_contents else '我们的宾馆系列融合了传统日式美学与现代舒适需求，每一间宾馆都经过精心设计。' }}
      </p>
    </div>
  </div>
</section>

<!-- 搜索功能区域 -->
<section class="py-8 bg-white">
  <div class="container mx-auto px-4">
    <div class="bg-gray-50 p-6 rounded-xl shadow-sm">
      <div class="flex flex-col md:flex-row gap-4">
        <div class="flex-1 relative">
          <input type="text" id="room-search-input"
                 placeholder="搜索宾馆名称、类型或价格.."
                 class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all">
          <svg class="w-5 h-5 absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
          </svg>
        </div>
        <div class="flex flex-wrap gap-2">
          <select id="room-type-filter" class="px-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all bg-white">
            <option value="all">所有房型</option>
            <option value="standard">标准间</option>
            <option value="deluxe">豪华间</option>
            <option value="suite">套房</option>
            <option value="family">家庭房</option>
              <option value="game">电竞房</option>
          </select>
          <select id="capacity-filter" class="px-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all bg-white">
            <option value="all">容纳人数</option>
            <option value="1">1人</option>
            <option value="2">2人</option>
            <option value="3">3人</option>
            <option value="4">4人以上</option>
          </select>
          <button id="search-btn" class="bg-primary text-white px-6 py-3 rounded-lg hover:bg-primary/90 transition-all duration-200 shadow-sm hover:shadow flex items-center">
            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
            </svg>
            搜索
          </button>
        </div>
      </div>
      <div id="search-results" class="mt-4 text-sm text-gray-500 hidden">
        找到 <span id="result-count">0</span> 条相关宾馆
      </div>
      <div id="no-results" class="mt-4 text-center py-6 hidden">
        <div class="w-16 h-16 mx-auto bg-gray-50 rounded-full flex items-center justify-center mb-4">
          <svg class="w-8 h-8 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
          </svg>
        </div>
        <p class="text-gray-500">没有找到匹配的宾馆</p>
      </div>
    </div>
  </div>
</section>

<!-- 所有宾馆 - 简单分页实现，每页6个 -->
<section class="py-12 bg-white">
  <div class="container mx-auto px-4">
    <!-- 从URL获取当前页码，默认为1 -->
    {% set page = request.args.get('page', 1) | int %}
    <!-- 每页显示6个宾馆 -->
    {% set per_page = 6 %}
    <!-- 计算总页数 -->
    {% set total_pages = (rooms | length + per_page - 1) // per_page %}
    <!-- 计算当前页显示的宾馆 -->
    {% set start = (page - 1) * per_page %}
    {% set end = start + per_page %}
    {% set current_rooms = rooms[start:end] %}

    <!-- 宾馆网格 - 响应式调整，每页6个 -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" id="rooms-container">
      {% for room in current_rooms %}
      <div class="bg-white rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 room-card"
           data-id="{{ room.id }}"
           data-name="{{ room.name }}"
           data-type="{{ room.room_type }}"
           data-capacity="{{ room.capacity }}"
           data-amenities="{{ room.amenities | lower }}">
        <div class="h-64 overflow-hidden cursor-pointer" onclick="window.location.href='{{ url_for('room_detail', room_id=room.id) }}'">
          <!-- 从数据库读取图片，增加默认图片处理 -->
          {% if room.image_url %}
            <img src="{{ url_for('static', filename='uploads/' + room.image_url) }}"
                 alt="{{ room.name }}"
                 class="w-full h-full object-cover transform hover:scale-105 transition-transform duration-500">
          {% else %}
            <img src="{{ url_for('static', filename='images/default-room.png') }}"
                 alt="{{ room.name }}的默认图片"
                 class="w-full h-full object-cover transform hover:scale-105 transition-transform duration-500">
          {% endif %}
        </div>
        <div class="p-6">
          <div class="flex justify-between items-start mb-4">
            <h3 class="text-2xl font-serif font-semibold text-primary cursor-pointer hover:text-primary/80 transition-colors"
                onclick="window.location.href='{{ url_for('room_detail', room_id=room.id) }}'">
              {{ room.name }}
            </h3>
            <span class="text-2xl font-bold text-accent">¥{{ room.price }}/晚</span>
          </div>

          <p class="text-gray-600 mb-4 line-clamp-3">{{ room.description }}</p>

          <div class="mb-4">
            <h4 class="font-semibold text-primary mb-2">宾馆设施</h4>
            <div class="flex flex-wrap gap-2">
              {% if room.amenities %}
                {% for amenity in room.amenities.split(',')[:4] %}
                <span class="bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-sm">{{ amenity.strip() }}</span>
                {% endfor %}
                {% if room.amenities.split(',').__len__() > 4 %}
                <span class="bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-sm">+{{ room.amenities.split(',').__len__() - 4 }} 更多</span>
                {% endif %}
              {% else %}
                <span class="bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-sm">空调</span>
                <span class="bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-sm">免费WiFi</span>
                <span class="bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-sm">独立卫浴</span>
              {% endif %}
            </div>
          </div>

          <div class="flex justify-between items-center">
            <div class="text-sm text-gray-500">
              <i class="fa fa-user mr-1"></i> 最多 {{ room.capacity }}人
              <span class="mx-2">•</span>
              <span class="px-2 py-1 rounded-full text-xs {% if room.status == 'available' %}bg-green-100 text-green-800{% else %}bg-red-100 text-red-800{% endif %}">
                {{ '可预订' if room.status == 'available' else '已满' }}
              </span>
            </div>
            <div class="flex gap-2">
              <a href="{{ url_for('room_detail', room_id=room.id) }}" class="bg-gray-100 text-gray-800 px-3 py-2 rounded hover:bg-gray-200 transition-colors text-sm">
                查看详情
              </a>
              {% if session.user_id %}
              <a href="{{ url_for('user.book_room', room_id=room.id) }}" class="bg-primary text-white px-4 py-2 rounded hover:bg-primary/90 transition-colors text-sm">
                立即预订
              </a>
              {% else %}
              <a href="{{ url_for('user.user_login', next=url_for('user.book_room', room_id=room.id)) }}" class="bg-primary text-white px-4 py-2 rounded hover:bg-primary/90 transition-colors text-sm">
                登录预订
              </a>
              {% endif %}
            </div>
          </div>
        </div>
      </div>
      {% else %}
      <!-- 当没有宾馆数据时显示 -->
      <div class="col-span-full py-16 text-center">
        <div class="text-gray-400 mb-4">
          <i class="fa fa-bed text-5xl"></i>
        </div>
        <h3 class="text-xl font-medium text-gray-600">暂无宾馆信息</h3>
        <p class="text-gray-500 mt-2">敬请期待我们的宾馆开放</p>
      </div>
      {% endfor %}
    </div>

    <!-- 分页控件 - 只在有多个页面时显示 -->
    {% if total_pages > 1 %}
    <div class="mt-12 flex justify-center">
      <nav class="inline-flex rounded-md shadow">
        <!-- 上一页 -->
        <a href="{{ url_for(request.endpoint, page=page-1) if page > 1 else '#' }}"
           class="relative inline-flex items-center px-4 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 {% if page <= 1 %}opacity-50 cursor-not-allowed{% endif %}">
          <i class="fa fa-chevron-left mr-1"></i> 上一页
        </a>

        <!-- 页码 -->
        {% for page_num in range(1, total_pages + 1) %}
          {% if page == page_num %}
            <a href="{{ url_for(request.endpoint, page=page_num) }}"
               class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-primary text-sm font-medium text-white">
              {{ page_num }}
            </a>
          {% else %}
            <a href="{{ url_for(request.endpoint, page=page_num) }}"
               class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
              {{ page_num }}
            </a>
          {% endif %}
        {% endfor %}

        <!-- 下一页 -->
        <a href="{{ url_for(request.endpoint, page=page+1) if page < total_pages else '#' }}"
           class="relative inline-flex items-center px-4 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 {% if page >= total_pages %}opacity-50 cursor-not-allowed{% endif %}">
          下一页 <i class="fa fa-chevron-right ml-1"></i>
        </a>
      </nav>
    </div>
    {% endif %}
  </div>
</section>

<!-- 房型比较 -->
<section class="py-16 bg-neutral">
  <div class="container mx-auto px-4">
    <h2 class="text-3xl font-serif font-bold text-primary text-center mb-12">房型比较</h2>

    <div class="overflow-x-auto">
      <table class="min-w-full bg-white rounded-lg overflow-hidden shadow-md">
        <thead class="bg-primary text-white">
          <tr>
            <th class="px-6 py-4 text-left">房型</th>
            <th class="px-6 py-4 text-center">面积</th>
            <th class="px-6 py-4 text-center">床型</th>
            <th class="px-6 py-4 text-center">容纳人数</th>
            <th class="px-6 py-4 text-center">价格</th>
            <th class="px-6 py-4 text-center">特色</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-gray-200">
          {% for room in current_rooms %}
          <tr {% if loop.index % 2 == 0 %}class="bg-gray-50"{% endif %}>
            <td class="px-6 py-4 font-semibold text-primary">
              <a href="{{ url_for('room_detail', room_id=room.id) }}" class="hover:underline">
                {{ room.name }}
              </a>
            </td>
            <td class="px-6 py-4 text-center">{{ room.size }}㎡</td>
            <td class="px-6 py-4 text-center">{% if room.room_type in ['suite', 'deluxe'] %}榻榻米+大床{% else %}榻榻米{% endif %}</td>
            <td class="px-6 py-4 text-center">{{ room.capacity }}人</td>
            <td class="px-6 py-4 text-center font-bold text-accent">¥{{ room.price }}/晚</td>
            <td class="px-6 py-4 text-center">
              {% if room.room_type == 'suite' %}私人温泉
              {% elif room.room_type == 'deluxe' %}庭院景观
              {% elif room.room_type == 'family' %}家庭适用
              {% else %}山景阳台{% endif %}
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</section>

<!-- 宾馆服务 -->
<section class="py-16 bg-white">
  <div class="container mx-auto px-4">
    <h2 class="text-3xl font-serif font-bold text-primary text-center mb-12">宾馆服务</h2>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
      <div class="text-center">
        <div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center mx-auto mb-4">
          <i class="fa fa-coffee text-white text-xl"></i>
        </div>
        <h3 class="text-lg font-semibold text-primary mb-2">宾馆餐饮</h3>
        <p class="text-gray-600 text-sm">传统日式早餐和晚餐可送至宾馆享用</p>
      </div>

      <div class="text-center">
        <div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center mx-auto mb-4">
          <i class="fa fa-concierge-bell text-white text-xl"></i>
        </div>
        <h3 class="text-lg font-semibold text-primary mb-2">24小时服务</h3>
        <p class="text-gray-600 text-sm">全天候宾馆服务，满足您的各种需求</p>
      </div>

      <div class="text-center">
        <div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center mx-auto mb-4">
          <i class="fa fa-spa text-white text-xl"></i>
        </div>
        <h3 class="text-lg font-semibold text-primary mb-2">温泉浴衣</h3>
        <p class="text-gray-600 text-sm">提供传统浴衣和温泉用品</p>
      </div>

      <div class="text-center">
        <div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center mx-auto mb-4">
          <i class="fa fa-wifi text-white text-xl"></i>
        </div>
        <h3 class="text-lg font-semibold text-primary mb-2">高速网络</h3>
        <p class="text-gray-600 text-sm">全馆覆盖免费高速WiFi</p>
      </div>
    </div>
  </div>
</section>

<!-- 预订CTA -->
<section class="py-16 bg-primary text-white">
  <div class="container mx-auto px-4 text-center">
    <h2 class="text-3xl font-serif font-bold mb-4">准备预订？</h2>
    <p class="text-xl mb-8 max-w-2xl mx-auto">
      选择您心仪的宾馆，开始规划您在风之宿的美好时光。
    </p>
    {% if session.user_id %}
    <a href="{{ url_for('user.book_room') }}" class="bg-white text-primary px-8 py-3 rounded-lg hover:bg-gray-100 transition-all text-lg font-semibold inline-block">
      立即预订
    </a>
    {% else %}
    <div class="space-x-4">
      <a href="{{ url_for('user.user_login') }}" class="bg-white text-primary px-8 py-3 rounded-lg hover:bg-gray-100 transition-all text-lg font-semibold inline-block">
        登录预订
      </a>
      <a href="{{ url_for('user.user_register') }}" class="border-2 border-white text-white px-8 py-3 rounded-lg hover:bg-white hover:text-primary transition-all text-lg font-semibold inline-block">
        注册账号
      </a>
    </div>
    {% endif %}
  </div>
</section>

<script>
// 搜索功能实现
document.addEventListener('DOMContentLoaded', function() {
  const searchInput = document.getElementById('room-search-input');
  const roomTypeFilter = document.getElementById('room-type-filter');
  const capacityFilter = document.getElementById('capacity-filter');
  const searchBtn = document.getElementById('search-btn');
  const roomCards = document.querySelectorAll('.room-card');
  const searchResults = document.getElementById('search-results');
  const resultCount = document.getElementById('result-count');
  const noResults = document.getElementById('no-results');

  // 搜索功能
  function performSearch() {
    const searchTerm = searchInput.value.toLowerCase().trim();
    const selectedType = roomTypeFilter.value;
    const selectedCapacity = capacityFilter.value;
    let count = 0;

    roomCards.forEach(card => {
      const name = card.dataset.name.toLowerCase();
      const type = card.dataset.type;
      const capacity = card.dataset.capacity;
      const amenities = card.dataset.amenities;

      // 检查是否符合搜索条件
      const matchesSearch = searchTerm === '' || name.includes(searchTerm) || amenities.includes(searchTerm);
      const matchesType = selectedType === 'all' || type === selectedType;
      const matchesCapacity = selectedCapacity === 'all' ||
                             (selectedCapacity === '4' && parseInt(capacity) >= 4) ||
                             capacity === selectedCapacity;

      // 显示或隐藏卡片
      if (matchesSearch && matchesType && matchesCapacity) {
        card.style.display = '';
        count++;
        // 添加淡入动画
        card.classList.add('animate-fadeIn');
        setTimeout(() => {
          card.classList.remove('animate-fadeIn');
        }, 500);
      } else {
        card.style.display = 'none';
      }
    });

    // 显示搜索结果统计
    if (searchTerm || selectedType !== 'all' || selectedCapacity !== 'all') {
      if (count > 0) {
        resultCount.textContent = count;
        searchResults.classList.remove('hidden');
        noResults.classList.add('hidden');
      } else {
        searchResults.classList.add('hidden');
        noResults.classList.remove('hidden');
      }
    } else {
      searchResults.classList.add('hidden');
      noResults.classList.add('hidden');
    }
  }

  // 绑定搜索事件
  searchBtn.addEventListener('click', performSearch);
  searchInput.addEventListener('keyup', function(e) {
    if (e.key === 'Enter') {
      performSearch();
    }
  });
  roomTypeFilter.addEventListener('change', performSearch);
  capacityFilter.addEventListener('change', performSearch);

  // 添加动画样式
  const style = document.createElement('style');
  style.textContent = `
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .animate-fadeIn {
      animation: fadeIn 0.3s ease forwards;
    }
  `;
  document.head.appendChild(style);
});
</script>
{% endblock %}